import { List, NavBar, SearchBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { Navigate, useNavigate } from 'react-router-dom'
import request from '../../api/request'
import useFd from '../../hooks/useFd'
import styles from './css/search.module.css'
function Index() {
    const navigate = useNavigate()
    const [disease, setDisease] = useState([])
    const [doctor, setDoctor] = useState([])
    const [drugs, setDrugs] = useState([])
    const [hotSearch, setHotSearch] = useState([])
    const fd=useFd()

    // 获取热门搜索
    useEffect(()=>{
        request.get('/share/v1/popularSearch').then(res => {
            console.log(res);
            setHotSearch(res.data.result)
        })
    },[])

    // 搜索
    const sou = fd((keyWord) => {
        request.get('/share/v1/homePageSearch', {
            params: {
                keyWord,
            }
        }).then(res => {
            console.log(res);
            setDisease(res.data.result?.diseaseSearchVoList)
            setDoctor(res.data.result?.doctorSearchVoList)
            setDrugs(res.data.result?.drugsSearchVoList)
        })
    })
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>
                <SearchBar placeholder='请输入内容' onChange={sou} showCancelButton autoFocus />
            </NavBar>

            <div className={styles.hotSearch}>
                热门搜索：{hotSearch.map((item,index)=>{
                    return <span key={index}>{item.name}</span>
                })}
            </div>

            {
                disease?.length > 0 &&
                <List header='疾病'>
                    {
                        disease.map((item,index) => {
                           return <List.Item key={index}>{item.diseaseName}</List.Item>
                        })
                    }
                </List>
            }

             {
                doctor?.length > 0 &&
                <List header='医生'>
                    {
                        doctor.map((item,ind) => {
                           return <List.Item key={ind}>{item.doctorName}</List.Item>
                        })
                    }
                </List>
            }

            {
                drugs?.length > 0 &&
                <List header='药物'>
                    {
                        drugs.map((item,ind) => {
                           return <List.Item key={ind}>{item.drugsName}</List.Item>
                        })
                    }
                </List>
            }
             
        </div>
    )
}

export default Index
